<template>
	<view class="details">
		<view class="details-info">
			<view class="details-info-title">我的: {{ info.name }}({{ info.price }})</view>
			<view class="details-info-state">{{ info.state ? '运行中' : '已到期' }}</view>
			<view class="details-info-sum">
				<view class="sum1">{{ sum }}</view>
				<view class="sum2">已领取：{{ price }}</view>
				<view class="sum3">剩余产量：{{ info.lnums }}</view>
				<view class="sum4">每日产量：{{ info.dayPrice }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import { accDiv, accMul } from '../../common/utils/math.js'
let timer = ''
export default {
	data() {
		return {
			sum: 0
		};
	},
	computed: {
		...mapGetters({
			info: 'getMachineDetails'
		}),
		price() {
			return parseFloat(this.info.totalPrice - this.info.lnums).toFixed(2);
		}
	},
	onShow() {
		this.count();
		timer = setInterval(() => {
			this.count();
		}, 2000);
	},
	methods: {
		count() {
			const myDate = new Date();
			const h = myDate.getHours(); //时，
			const m = myDate.getMinutes(); //分
			const s = myDate.getSeconds(); //秒
			const timeSum = (h * 3600 + (m * 60 + s)) / 100 // 当前时间戳 缩小100倍
			const timeSumUP = accDiv(this.info.dayPrice, 864); // 每次执行递增 放大100倍
			const timeSumSeconds = accMul(timeSumUP, timeSum);
			this.sum = timeSumSeconds;
		}
	},
	onUnload() {
		clearInterval(timer);
	}
};
</script>

<style scoped lang="scss">
.details {
	position: relative;
	height: 100vh;
	background-color: #000034;
	&-info {
		padding: 30upx;
		&-title {
			font-size: 40upx;
			color: #fff;
		}
		&-state {
			position: absolute;
			top: 30%;
			left: 0;
			right: 0;
			margin: auto;
			width: 200upx;
			height: 200upx;
			line-height: 200upx;
			text-align: center;
			font-size: 34upx;
			color: #fff;
			border-radius: 200upx;
			background-color: rgba(0, 128, 0, 0.5);
		}
		&-sum {
			position: absolute;
			bottom: 50upx;
			left: 30upx;
			color: #fff;
			.sum1 {
				font-size: 44upx;
				font-size: 500;
			}
			.sum2,
			.sum3,
			.sum4 {
				font-size: 34upx;
			}
		}
	}
}
.img {
	width: 400upx;
	height: 400upx;
	margin: auto;
	text-align: center;
}
</style>
